<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
	</head>
	<body>
		<div id="section_container">
			<section id="scroll_section" data-role="section" class="active">
				<header>
		            <div class="titlebar">
		            	<a class="left" data-toggle="back" href="#">
		                    <i class="icon icon-arrowleft"></i>
		                </a>
		                <h1 class="text-center">滚动组件</h1>
		            </div>
		            <div id="tabbarOuter" data-scroll="horizontal">
				    	<div class="scroller" style="width:500px;">
				            <ul class="slidebar">
				                <li class="tab active">
				                    <label class="tab-label">头条</label>
				                </li>
				                <li class="tab">
				                    <label class="tab-label">推荐</label>
				                </li>
				                <li class="tab">
				                    <label class="tab-label">科技</label>
				                </li>
				                <li class="tab">
				                    <label class="tab-label">舆情</label>
				                </li>
				                <li class="tab">
				                    <label class="tab-label">动态</label>
				                </li>
				                <li class="tab">
				                    <label class="tab-label">国内</label>
				                </li>
				                <li class="tab">
				                    <label class="tab-label">国际</label>
				                </li>
				            </ul>
						</div>
					</div>
		        </header>
				<article  data-role="article" id="scroll_article" data-scroll="verticle" class="active" style="top:88px;bottom:0px;">
					<div class="scroller">
						<details open>
			                <summary class="sliver">用法</summary>
			                <ul class="list">
			                	<li>
			                        <div class="justify-content">
			                            <p>需要在页面中引入iscroll-probe.js</p>
			                        </div>
			                    </li>
			                    <li>
			                        <div class="justify-content">
			                            <p>data-scroll="verticle|horizontal|scroll"</p>
			                        </div>
			                    </li>
			            </details>
			            
			            <details open>
			                <summary class="sliver">说明</summary>
			                <ul class="list">
			                    <li>
			                        <div class="justify-content">
			                            <p>verticle：纵向滚动条</p>
			                        </div>
			                    </li>
			                    <li>
			                        <div class="justify-content">
			                            <p>horizontal：横滚动条</p>
			                        </div>
			                    </li>
			                    <li>
			                        <div class="justify-content">
			                            <p>scroll：纵向、横滚动条</p>
			                        </div>
			                    </li>
			            </details>
			            
			            <details open>
			                <summary class="sliver">初始化</summary>
			                <ul class="list">
			                    <li>
			                        <div class="justify-content">
			                            <p>articleload的时候默认初始化</p>
			                        </div>
			                    </li>
			                    <li>
			                        <div class="justify-content">
			                            <p>手动初始化调用var scroll = A.Scroll('#id')</p>
			                        </div>
			                    </li>
			            </details>
			            
			            <details open>
			                <summary class="sliver">事件</summary>
			                <ul class="list">
			                    <li>
			                        <div class="justify-content">
			                            <p>使用方法：scroll.on('event',function);</p>
			                        </div>
			                    </li>
			                    <li>
			                        <div class="justify-content">
			                            <p>event支持ISroll的所有事件</p>
			                        </div>
			                    </li>
			                    <li>
			                        <div class="justify-content">
			                            <p>扩展支持：scrollInit、scrollTop和scrollBottom</p>
			                        </div>
			                    </li>
			            </details>
    				</div>  
				</article>
			</section>
		</div>

		
		<!--- third -->
		<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="../assets/third/iscroll/iscroll-probe.js"></script>
		<!---  agile -->
		<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
		<!-- app -->
		<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
		<script>
			//当scroll初始化会进入此监听
			$('#scroll_article').on('scrollInit', function(){
				var scroll = A.Scroll(this);//已经初始化后不会重新初始化，但是可以得到滚动对象
				//监听滚动到顶部事件，可以做一些逻辑操作
				scroll.on('scrollTop', function(){
					A.showToast('滚动到顶部');
					//scroll.refresh(); //如果scroll区域dom有改变，需要刷新一下此区域
				});
				//监听滚动到底部事件，可以做一些逻辑操作
				scroll.on('scrollBottom', function(){
					A.showToast('滚动到底部');
					//scroll.refresh(); //如果scroll区域dom有改变，需要刷新一下此区域，
				});
			});
			
			$('#scroll_section').on('sectionshow', function(){
				A.Component.scroll('#tabbarOuter');
			});
		</script>
	</body>
</html>